<form [formGroup]="form" novalidate (ngSubmit)="signIn()">
  <div appFloatingContainer class="form-group">
    <label appFloatingLabel class="text-capitalize">{{'email' | translate}}</label>
    <app-control-tip [control]="form.controls.email"></app-control-tip>
    <input type="text" appFloatingInput class="form-control" formControlName="email" autofocus>
  </div>
  <div class="form-group" appFloatingContainer>
    <label appFloatingLabel class="text-capitalize">{{'password' | translate}}</label>
    <app-control-tip [control]="form.controls.password"></app-control-tip>
    <div class="input-group">
      <input type="password" class="form-control" appFloatingInput formControlName="password" #password>
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button" [appPasswordVisible]="password" mdRipple><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
      </span>
    </div>
  </div>
  <div class="form-group floating-container-next">
    <div class="form-check">
      <label class="form-check-label text-capitalize">
        <input type="checkbox" class="form-check-input" formControlName="rememberMe" [value]="1">
        {{'rememberMe' | translate}}
      </label>
    </div>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-block text-capitalize" mdRipple [disabled]="!form.valid">{{'signIn' | translate}}</button>
  </div>
</form>
<div class="form-group row no-gutters footer-controls">
  <div class="text-center col-sm-6 text-sm-left footer-control">
    <a routerLink="/auth/forgot-password" class="text-capitalize">{{'ForgotPassword' | translate}}</a>
  </div>
  <div class="text-center col-sm-6 text-sm-right footer-control">
    <a routerLink="/auth/sign-up" class="text-capitalize">{{'signUp' | translate}}</a>
  </div>
</div>
